<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<style>
		* {
		  margin: 0;
		  padding: 0;
		}
		body{
			/* position: relative; */
			height: 100vh;
			width: 100vw;
			background-image: url(./f0ef5ddf9b9b312e.webp);
			background-repeat: no-repeat;
			background-size: 100%;
		}
		@keyframes xueren {
		  0% {
			transform: rotate(-30deg);
		  }
		  50%{
			  transform: rotate(30deg);
		  }
		  100% {
		    /* transform: scale(0.5); */
			transform: rotate(-30deg);
		  }
		}
		.img1{
			position: absolute;
			bottom: 10%;
			left:45%;
			animation: xueren 3s infinite;
		}
		.img1 img{
			animation: xueren 3s infinite;
		}
		.img2{
			position: absolute;
			top:-20%;
			animation: xiaxue 3s infinite;
			
		}
		.img2 img{
			width: 160%;
		}
		.img3{
			position: absolute;
			bottom: 30%;
			left:15%;
			border-radius: 20px;
			overflow: hidden;
			animation: nvhai 3s linear;
		}
		@keyframes xiaxue {
		  0% {
		    top:-20%;
		    transform: scale(1);
			opacity: 1;
		  }
		
		  100% {
		    top: 80%;
		    transform: scale(0.5);
			opacity: 0;
		  }
		}
		@keyframes nvhai {
		  0% {
		    bottom: -30%;
		    transform: scale(0);
			opacity: 0;
		  }
		
		  100% {
		     bottom: 30%;
		    transform: scale(1);
			opacity: 1;
			
		  }
		}
		
		
	</style>
	<body>
		<div class="img1">
			<img style="width: 100%;" src="./xueren.png" alt="" />
		</div>
		<div class="img2">
			<img src="./xuehua.png" alt="" />
		</div>
		<div class="img3">
			<img src="./3.jpg" alt="" />
		</div>
	</body>
</html>